<style>
#zxzpInner {
    text-align: left;
}

#zxzpInner select {
    padding: 2px;
    font-size: 14px;
    border: 1px solid #aadafd;
    vertical-align: middle;
}

#zxzpInner .form-group .btn {
    vertical-align: middle;
    margin-right: 3px;
}

#zxzpInnerMaintenanceUser {
    float: right;
}

#zxzpInner #filter {
    border: 1px solid #ebebeb;
}

#zxzpInner #filter .filter-title {
    display: inline-block;
    font-size: 16px;
    line-height: 36px;
    text-indent: 15px;
}

#zxzpInner .filter-inner-c {
    position: relative;
    display: inline-block;
    height: 180px;
    margin-bottom: 5px;
}

#zxzpInner .filter-inner-c .filter-row {
    height: 34px;
    margin-bottom: 2px;
}

#zxzpInner .filter-inner-c .filter-row .filter-row-title {
    font-size: 14px;
    padding-right: 6px;
    height: 34px;
    line-height: 34px;
    vertical-align: middle;
    display: inline-block;
    text-align: right;
    width: 85px;
}

#zxzpInner .filter-inner-left {
    margin-left: 47px;
    width: 312px;
}

#zxzpInner .filter-inner-right {
    margin-left: 50px;
}

#zxzpInner .filter-submit {
    margin-left: 136px;
}

#zxzpInner .filter-submit-btn {
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    width: 224px;
    display: inline-block;
    margin-bottom: 10px;
    cursor: pointer;
}

#zxzpInner .filter-submit-btn-clear {
    background-color: #3595dc;
    margin-right: 62px;
}

#zxzpInner .filter-submit-btn-filter {
    background-color: #fe0100;
}

#zxzpInner .filter-fold {
    width: 207px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #ebebeb;
    border-top: none;
    position: relative;
    left: 50%;
    margin-left: -103.5px;
    bottom: 1px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
}

#zxzpInner .hidden {
    display: none;
}

#zxzpInner .person-number {
    color: #f00;
}

#zxzpInner .result-title {
    font-size: 14px;
    text-indent: 10px;
    margin: 5px 0;
}

#zxzpInner .table tr td,
#zxzpInner .table tr th {
    text-align: center;
    height: 42px;
    line-height: 42px;
    padding: 0;
}

.sn-select {
    display: inline-block;
    width: 100px;
    height: 28px;
    position: relative;
    border: 1px solid #aadafd;
    vertical-align: middle;
    cursor: text;
}

.sn-select-option-container {
    background-color: #ddd;
    border: 1px solid #aadafd;
    position: absolute;
    width: 100px;
    top: 26px;
    left: -1px;
    max-height: 140px;
    overflow: auto;
}

.sn-select-option-item {
    height: 28px;
    line-height: 28px;
    text-indent: 5px;
    cursor: pointer;
}

.sn-select-option-item:hover {
    background-color: #338fff;
    color: #fff;
}

.sn-select-option-item .checkbox {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

.sn-select-option-item .val {
    display: inline-block;
    vertical-align: bottom;
}

.sn-s {
    position: absolute;
    left: 88px;
    margin-top: -30px;
    z-index: 999;
}

.checks_v {
    height: 28px;
    border: 1px solid #aadafd;
    text-indent: 2px;
    line-height: 28px;
    width: 224px;
}

.checks_div_select {
    margin-top: -1px;
    background-color: #fff;
    max-height: 140px;
    border: 1px solid #aadafd;
    width: 224px;
    z-index: 999;
    overflow: auto;
}

.checks_div_select>div {
    height: 28px;
    line-height: 28px;
}

.checks_div_select>div input {
    margin: 2px;
    display: inline-block;
    vertical-align: middle;
}

#zxzpInnerBtnUserList {
    float: right;
}
</style>
<div id="zxzpInner" ms-controller="zxzpInner">
    <div class="form-group">
        <select name="" class="select">
            <option value="">1</option>
            <option value="">1</option>
            <option value="">1</option>
            <option value="">1</option>
            <option value="">1</option>
            <option value="">1</option>
        </select>
        <button class="btn btn-info" id="zxzpInnerMaintenanceUser">
            维护招聘人员范围
        </button>
    </div>
    <div class="zxzpInnerContainer" id="zxzpInnerFilter">
        <div id="filter">
            <span class="filter-title">
    		筛选
    	</span>
            <div class="filter-inner">
                <div class="filter-inner-left filter-inner-c">
                    <div class="filter-row">
                        <div class="filter-row-title">
                            年龄
                        </div>
                        <select name="" id="">
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                        </select>
                        <span>
						至
					</span>
                        <select name="" id="">
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="filter-row">
                        <div class="filter-row-title">
                            学历
                        </div>
                        <div class="sn-s" style="z-index:999">
                            <input type="text" class="checks_v" id="1" />
                        </div>
                    </div>
                    <div class="filter-row">
                        <div class="filter-row-title">
                            职业等级
                        </div>
                        <div class="sn-s" style="z-index:998">
                            <input type="text" class="checks_v" id="2" />
                        </div>
                    </div>
                    <div class="filter-row">
                        <div class="filter-row-title">
                            现从事专业
                        </div>
                        <div class="sn-s" style="z-index:997">
                            <input type="text" class="checks_v" id="3" />
                        </div>
                    </div>
                    <div class="filter-row">
                        <div class="filter-row-title">
                            所学专业
                        </div>
                        <div class="sn-s" style="z-index:996">
                            <input type="text" class="checks_v" id="4" />
                        </div>
                    </div>
                </div>
                <div class="filter-inner-right filter-inner-c">
                    <div class="filter-row">
                        <div class="filter-row-title">
                            工作年限
                        </div>
                        <select name="" id="">
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                        </select>
                        以上
                    </div>
                    <div class="filter-row">
                        <div class="filter-row-title">
                            性别
                        </div>
                        <select name="" id="">
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="filter-row">
                        <div class="filter-row-title">
                            技能等级
                        </div>
                        <div class="sn-s" style="z-index:999">
                            <input type="text" class="checks_v" id="5" />
                        </div>
                    </div>
                    <div class="filter-row">
                        <div class="filter-row-title">
                            现职业工种
                        </div>
                        <div class="sn-s" style="z-index:998">
                            <input type="text" class="checks_v" id="6" />
                        </div>
                    </div>
                </div>
                <div class="filter-submit">
                    <div class="filter-submit-btn filter-submit-btn-clear">清空筛选条件</div>
                    <div class="filter-submit-btn filter-submit-btn-filter">筛选</div>
                </div>
            </div>
        </div>
        <div class="filter-fold">
            <div class="filter-fold-up">
                <span>收起筛选条件</span> &nbsp; &nbsp; &nbsp;
                <img src="../images/icon_arrowup.png" alt="">
            </div>
            <div class="filter-fold-down hidden">
                <span>展开筛选条件</span> &nbsp; &nbsp; &nbsp;
                <img src="../images/icon_arrowdown.png" alt="">
            </div>
        </div>
        <div class="result">
            <div class="result-title">
                人数：<span class="person-number">151</span>人
            </div>
            <div class="result-data">
                <table class="table table-bordered">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>学历</th>
                        <th>专业</th>
                        <th>职称</th>
                        <th>技能等级</th>
                        <th>现单位</th>
                        <th>现岗位</th>
                    </tr>
                    <tr ms-repeat="userList">
                        <td>{{el.name}}</td>
                        <td>{{el.sex}}</td>
                        <td>{{el.age}}</td>
                        <td>{{el.education}}</td>
                        <td>{{el.major}}</td>
                        <td>{{el.majorTitle}}</td>
                        <td>{{el.level}}</td>
                        <td>{{el.section}}</td>
                        <td>{{el.station}}</td>
                    </tr>
                </table>
                <div id="filterUserList" style="text-align: center;"></div>
            </div>
        </div>
    </div>
    <div class="zxzpInnerContainer" id="zxzpInnerUserList" style="display: none;">
        <div class="form-group">
            <button class="btn btn-danger" id="zxzpInnerBtnAddUser">
                添加人员
            </button>
            <button class="btn btn-success" id="zxzpInnerBtnRemoveUser">
                移除人员
            </button>
            <button class="btn btn-info" id="zxzpInnerBtnUserList">
                花名册
            </button>
        </div>
        <div class="result">
            <div class="result-title">
                人数：<span class="person-number">151</span>人
            </div>
            <div class="result-data">
                <table class="table table-bordered">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>学历</th>
                        <th>专业</th>
                        <th>职称</th>
                        <th>技能等级</th>
                        <th>现单位</th>
                        <th>现岗位</th>
                    </tr>
                    <tr ms-repeat="userList2">
                        <td>{{el.name}}</td>
                        <td>{{el.sex}}</td>
                        <td>{{el.age}}</td>
                        <td>{{el.education}}</td>
                        <td>{{el.major}}</td>
                        <td>{{el.majorTitle}}</td>
                        <td>{{el.level}}</td>
                        <td>{{el.section}}</td>
                        <td>{{el.station}}</td>
                    </tr>
                </table>
                <div id="userListPager" style="text-align: center;"></div>
            </div>
        </div>
    </div>
</div>
<script>
var zxzpInner = avalon.define({
    $id: "zxzpInner",
    userList: [{
        name: '张三',
        sex: '男',
        age: '15',
        education: '小学',
        major: '学生',
        majorTitle: '三年级扛把子',
        level: '3',
        section: '附属小学',
        station: '小学生'
    }],
    userList2: [{
        name: '张三',
        sex: '男',
        age: '15',
        education: '小学',
        major: '学生',
        majorTitle: '三年级扛把子',
        level: '3',
        section: '附属小学',
        station: '小学生'
    }]
});

function init() {
    $("#zxzpInner .filter-fold").click(function(event) {
        /* Act on the event */
        $("#zxzpInner .filter-inner").toggle(500);
        $(".filter-fold-down,.filter-fold-up").toggleClass('hidden');
    });
    $('#filterUserList').extendPagination({
        totalCount: 100,
        showCount: 5,
        limit: 5,
        callback: zxzpInnerPageCallBack
    });
    $('#userListPager').extendPagination({
        totalCount: 100,
        showCount: 5,
        limit: 5,
        callback: zxzpInnerPageCallBack
    });
    $("#zxzpInnerMaintenanceUser").click(function(event) {
    	/* Act on the event */
    	$(this).hide();
    	$(".zxzpInnerContainer").hide(500);    	
    	$("#zxzpInnerUserList").show(500);
    });
    selectInit();
}

function selectInit() {	
    var options = {
        1: "第一个选择项",
        2: "第二个选择项",
        3: "第三个选择项",
        4: "第四个选择项",
        5: "第五个选择项",
        6: "第六个选择项"
    };
    $("#zxzpInner .checks_v").each(function(index, el) {
    	console.log(index)
        $(el).checks_select(options);
    });
}

function zxzpInnerPageCallBack(curr, limit, totalCount) {
    alert("您点击的第" + curr + "页");
}
setTimeout(init, 0);
</script>
